<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 300px;
            margin: 20px;
            background: linear-gradient(#F9FBCB,#F8F8F3);
        }
        .box h4{
            color: #fff;
            line-height: 30px;
            background: #518700 url(./image/bang.gif) 90px no-repeat;
        }
        
        .box ul{
            list-style-type: none;
            padding: 20px 10px;
        }

        .box ul li{
            padding: 5px 30px;
        }

        .box ul li a{
            text-decoration: none;
            color: #1a66b3;
        }

        .box ul li a:hover{
            text-decoration: underline;
        }

        .box ul li:nth-child(1){
            background: url(./image/book_no01.gif) 10px 5px no-repeat;
        }
        .box ul li:nth-child(2){
            background: url(./image/book_no02.gif) 10px 5px no-repeat;
        }
        .box ul li:nth-child(3){
            background: url(./image/book_no03.gif) 10px 5px no-repeat;
        }
        .box ul li:nth-child(4){
            background: url(./image/book_no04.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(5){
            background: url(./image/book_no05.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(6){
            background: url(./image/book_no06.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(7){
            background: url(./image/book_no07.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(8){
            background: url(./image/book_no08.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(9){
            background: url(./image/book_no09.gif) 10px 10px no-repeat;
        }
        .box ul li:nth-child(10){
            background: url(./image/book_no10.gif) 10px 10px no-repeat;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <h4> &nbsp;&nbsp;畅销书排行&nbsp;&nbsp;</h4>  
        <ul>
            <li><a href=#>不抱怨的世界(畅...</a></li>
            <li><a href=#>遇见未知的自己...</a></li>
            <li><a href=#>活法（季羡林、...</a></li>
            <li><a href=#>高效能人士的七个习惯</a></li>
            <li><a href=#>被迫强大（北外女生香奈儿...</a></li>
            <li><a href=#>遇见心想事成的自己（《遇...</a></li>
            <li><a href=#>世界上最伟大的推销员（插...</a></li>
            <li><a href=#>我的成功可以复制（唐骏亲...</a></li>
            <li><a href=#>少有人走的路：心智成熟的...</a></li>
            <li><a href=#>活出全新的自己——唤醒...</a></li>
        </ul>
        
    </div>
    
    
</body>
</html>